<template>
	<view>
		<view>
			<view class="bgc">
				<!-- 头部背景 -->
				<image class="img-top" src="https://gbay.dcyu.com/uploads/images/personal-shop_bg2.png" mode="widthFix"></image>
				<view class="box">
					<!-- 累计用户 -->
					<view class="box-head">
						<text>{{i18n.Yiyou}}<text>888</text>{{i18n.UserLeiji}}</text>
					</view>
					<!-- 会员套餐 -->
					<view class="combo">
						<view class="combo-head">
							<view class="box-body-title">
								{{i18n.Huiy}}
							</view>
							<view class="combo-fr">
								{{i18n.Shuomin}}
							</view>
						</view>
						<view class="combo-body">
							<view class="yearvip" v-for="(item,index) in combolist" @click="check(item.real_money,index)" :class="checkprice === index ? 'red-border' : ''">
								<view class="v-title">
									{{item.title}}
								</view>
								<view class="v-price">
									<i>￥</i>{{item.real_money}}
								</view>
								<view class="v-zhekou">
									￥{{item.money}}
								</view>
							</view>
						</view>
						<view class="combo-bottom">
							<label class="radio">
								<checkbox @click="getbtn=!getbtn" /><text>{{i18n.Yiyuedu}}</text><i>{{i18n.Fuwu}}</i>
							</label>
							<button class="btn" @click="btn" hover-class="none">限时{{price}}元/年，立即开通</button>
						</view>
					</view>
					<!-- 专属权益 -->
					<view class="box-body">
						<view class="box-body-title">{{i18n.Quanyi}}</view>
						<view class="box-body-list">
							<view class="list"  v-for="(item,index) in list" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
					<!-- 常见问题 -->
					<view class="box-botton">
						<view class="box-body-title">{{i18n.Chenjian}}</view>
						<text class="ask">{{i18n.Wan}}</text></br>
						<text class="da">{{i18n.Da}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const globalData = getApp().globalData;
	import {getmerchantvip} from '@/api/store.js';
	export default {
		data() {
			return {
				checkprice:0,
				price:'',
				getbtn:false,
				combolist:[],
					list:[
						{
							id:1,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon1.png",
							text:globalData.$t('member_type').Mianfei
						},
						{
							id:2,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon2.png",
							text:globalData.$t('member_type').Jianli
						},
						{
							id:3,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon3.png",
							text:globalData.$t('member_type').Chunxiang
						},
						{
							id:4,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon4.png",
							text:globalData.$t('member_type').Dazhe
						},
						{
							id:5,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon5.png",
							text:globalData.$t('member_type').Zigou
						},
						{
							id:6,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon6.png",
							text:globalData.$t('member_type').Zhaungqian
						},
						{
							id:7,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon7.png",
							text:globalData.$t('member_type').Jux
						},
						{
							id:8,
							img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon8.png",
							text:globalData.$t('member_type').Fuli
						}
					]
			}
		},
		computed: {
		   i18n() {
		    return globalData.$t('member_type');
		   },
		  },
		methods: {
			check:function(e,index){
				this.price=e;
				this.checkprice=index
			},
			getvip:function(){
				let that = this
				getmerchantvip().then(data=>{
					that.combolist = data.data,
					that.price=that.combolist[0].real_money
				});
			},
			btn:function(){
				if (!this.getbtn) {
					this.$util.Tips({
						title:this.i18n.Tongyi,
					});
					return false
				}else{
					uni.navigateToMiniProgram({    //A文件
					    appId: 'wxde66081937620e05', //  B的微信小程序Id
					    path: '',   
					    extraData: {
					         openId: '',  //需要传的参数
					},
						envVersion: 'trial', //体验版（trial） 开发版（develop） 正式版（release）  //发布上线后不管这里如何配置都将跳到正式版
						success(res) {
							uni.showToast({title: '跳转成功'}) 
							console.log(res)
						},
						fail(res){
							uni.showToast({ title: '跳转失败' ,icon:'none'})
							console.log(res)
						},
						complete(res){
							console.log('hello')
						}
					})
				};
			}
		},
		created () {
			this.getvip();
		}
	}
</script>

<style lang="less" scoped>
.red-border{
	border-color: #FD342A !important;
	background-color: #FFF3F5 !important;
}
.bgc{
	position: relative;
	height: 2160rpx;
	background-color: #FAEBD8;
}

.img-top{
	width: 100%;
}

.box{
	position: absolute;
	top: 500rpx;
	width: 100%;
	padding:0 30rpx;
}

.box-head,
.box-body,
.box-botton,
.combo{
	margin:0 0 20rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0 ;
	border-radius: 20rpx;
}

.box-head{
	height: 239rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text{
		text-align: center;
		display: inline-block;
		line-height:70rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		text{
			font-size: 70rpx;
			color: red;
		}
	}
}

.box-body{
	padding-top: 30rpx;
	height: 460rpx;
	font-weight: b;
}

.box-body-title{
	padding: 0 0 44rpx 30rpx !important;
	font-size: 32rpx;
	font-weight: bold;
	color: #222222;
}

.box-body-list{
	display: flex;
	flex-wrap: wrap;
	.list{
		text-align: center;
		line-height: 30rpx;
		width: 25%;
		height: 140rpx;
		margin-bottom: 40rpx;
		image{
			height: 86rpx;
			width: 86rpx;
		}
		text{
			display: inline-block;
			font-size: 24rpx;
		}
	}
}

.combo{
	padding-top: 30rpx;
	height: 585rpx;
	.box-body-title{
		padding: 0 0 0 30rpx !important;
		float: left;
	}
	.combo-fr{
		padding-right: 30rpx;
		float: right;
		font-size: 24rpx;
		color: #BDBDBD;
	}
}
.combo-head{
	height: 90rpx;
}
.combo-body{
	display: flex;
}
.yearvip,
.eravip{
	margin:0 0 38rpx 30rpx;
	width: 303rpx !important;
	height: 220rpx;
	border-radius: 20rpx;
	border: 2rpx solid #EAEAEA;;
	text-align: center;
	.v-title{
		padding-top: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
	}
	.v-price{
		width: 303rpx !important;
		padding: 4 rpx 0;
		font-size: 64rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FD342A;
		i{
			display: inline-block;
			font-size: 32rpx;
			font-weight: bold;
			color: #FD342A;
		}
	}
	.v-zhekou{
		font-size: 28rpx;
		font-family: DIN;
		font-weight: bold;
		text-decoration:line-through;
		color: #999999;
	}
}

.box-botton{
	padding: 30rpx;
	height: 320rpx;
	margin-bottom: 0;
	border-radius: 20rpx 20rpx 0 0 !important;
	.box-body-title{
		padding: 0 0 30rpx 0 !important; 
	}
	.ask{
		font-size: 30rpx;
		line-height: 50rpx;
		color: #666666;
		font-weight: bold;
	}
	.da{	
		font-size: 28rpx;
		line-height: 50rpx;
		color: #666666;
	}
}
.combo-bottom{
	padding:26rpx 0;
	height: 200rpx;
	background-color: #FFFFFF !important;
	.btn{
		margin: 26rpx 60rpx 0;
		height: 80rpx;
		background: linear-gradient(90deg, #F76D3C 0%, #FD342A 100%);
		line-height: 80rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
	}
	.radio{
		margin-left: 60rpx;
		font-size: 24rpx;
		text{color: #999999;}
		i{display: inline-block; color: #FD342A;}
	}
}
</style>
